<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="web/templates/ui.xhtml">
	<ui:define name="title">
		<h:outputText value="Registro de Directivos" />
	</ui:define>
	<ui:define name="sidebar">
		<div class="widget">
			<div class="title">
				<div class="inner">
					<h3>
						<h:outputText value="Menú" />
					</h3>
				</div>
			</div>
			<!-- MENU PERFIL ADMINISTADOR -->
			<ui:include src="menu.xhtml" />
		</div>
	</ui:define>
	<ui:define name="content">
		<div class="page-header">
			<h3>
				<h:outputText value="Directivos" />&nbsp;&nbsp;
				<h:graphicImage url="resources/images/question.png" id="ayudaDirectivo"></h:graphicImage>
				<p:tooltip id="toolTipContent" for="ayudaDirectivo" trackMouse="true" showEffect="clip" hideEffect="explode">
			       Estimado Usuario:<br/>
			       Si desea modificar la descripción o agregar una nueva unidad orgánica al listado que se presenta;<br/>
				   por favor comunicarse a los números +51 1 2063370 Anexo 5615 o Anexo 5690
			    </p:tooltip>
			</h3>
		</div>
		<div class="subTitle">
			<ol class="breadcrumb">
				<li><a href="index.jsf"><span
						class="glyphicon glyphicon-home"></span></a></li>
				<li class="active">Registro</li>
			</ol>
		</div>
		<h:form id="form">
			<p:messages id="messages" autoUpdate="true" />
			<div class="page-subheader">
				<h3>Datos Personales</h3>
			</div>
			<div class="gridContent">
				<div class="inner">
					<div class="row">
						<div class="col-sm-12 form-group">
							<p:outputLabel value="Censo" for="cboCenso" />
							<h:selectOneMenu id="cboCenso" required="true"
								value="#{directivoService.directivo.idCenso}"
								styleClass="form-control"
								disabled="#{!directivoService.mostrarComboCenso or directivoService.deshabilitar}">
								<f:selectItem itemLabel="Seleccionar" itemValue="0"
									noSelectionOption="true" />
								<f:selectItems value="#{directivoService.listaCensos}"
									var="censo" itemLabel="#{censo.nombre}" itemValue="#{censo.id}" />
								<p:ajax listener="#{directivoService.onCensoChange}"
									update="cboEnt cboOrg cboUOrg cboPuesEsp" />
							</h:selectOneMenu>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4 form-group">
							<p:outputLabel for="txtDNI" value="Documento de Identidad" />
							<div class="input-group">
								<p:inputMask id="txtDNI"
									value="#{directivoService.directivo.nroDocumento}"
									disabled="#{directivoService.deshabilitaCampo}" maxlength="8"
									required="true" autocomplete="off" onkeyup="$(this).val($(this).val().replace(/[^0-9]/g, ''));"
									requiredMessage="Documento de Identidad: Campo es Obligatorio."
									validatorMessage="Documento de Identidad: Campo debe tener 8 caracteres.">
									<f:validateLength minimum="8" maximum="8" />
									<p:ajax event="keyup"
										update="panelReniec"
										listener="#{directivoService.handleKeyEvent}" />
								</p:inputMask>
								<span class="input-group-btn">
								<c:if test="#{directivoService.mostrarBotonReniec}">
								<p:commandButton
										id="ajaxReniec" styleClass="btn btn-default" process="@this"
										update="panelReniec"
										value="Reniec"
										actionListener="#{directivoService.obtenerPersona}"/>
										</c:if>
								</span>
							</div>
						</div>
					</div>
					<p:panel id="panelReniec">
					<div class="row">
						<div class="col-sm-4 form-group">
							<p:outputLabel value="Apellido Paterno" for="txtApePat" />
							<p:inputText id="txtApePat"
								value="#{directivoService.directivo.apellidoPaterno}"
								disabled="true" />
						</div>
						<div class="col-sm-4 form-group">
							<p:outputLabel value="Apellido Materno" for="txtApeMat" />
							<p:inputText id="txtApeMat"
								value="#{directivoService.directivo.apellidoMaterno}"
								disabled="true" />
						</div>
						<div class="col-sm-4 form-group">
							<p:outputLabel value="Nombre(s)" for="txtNombres" />
							<p:inputText id="txtNombres"
								value="#{directivoService.directivo.nombreCompleto}"
								disabled="true" />
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4 form-group">
							<p:outputLabel value="Nacimiento" for="txtFecNac" />
							<p:calendar id="txtFecNac"
								value="#{directivoService.directivo.fechaNacimiento}"
								pattern="dd/MM/yyyy" disabled="true" />
						</div>
						<div class="col-sm-4 form-group">
							<p:outputLabel value="Género" for="cboGenero" />
							<h:selectOneMenu styleClass="form-control" id="cboGenero"
								disabled="true" value="#{directivoService.directivo.sexo}">
								<f:selectItem itemLabel="Seleccionar" itemValue=""
									noSelectionOption="true" />
								<f:selectItem itemLabel="MASCULINO" itemValue="1" />
								<f:selectItem itemLabel="FEMENINO" itemValue="2" />
							</h:selectOneMenu>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12 form-group">
							<p:outputLabel for="txtDir" value="Dirección de Residencia" />
							<p:inputText id="txtDir" value="#{directivoService.directivo.direccion}" 
							maxlength="200" required="true"
							disabled="${directivoService.deshabilitar}" 
							requiredMessage="Dirección de Residencia: Campo Obligatorio."/>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4 form-group">
							<p:outputLabel for="cboDept" value="Departamento" />
							<h:selectOneMenu id="cboDept"
								value="#{directivoService.directivo.ubigeoDepartamento}"
								disabled="${directivoService.deshabilitar}"
								styleClass="form-control">
								<f:selectItem itemLabel="Seleccionar" itemValue="00"
									noSelectionOption="true" />
								<p:ajax listener="#{directivoService.onDepartamentoChange}"
									update="cboProv,cboDis" />
								<f:selectItems value="#{directivoService.listaDepartamentos}"
									var="departamento" itemLabel="#{departamento.descripcion}"
									itemValue="#{departamento.codigo}" />
							</h:selectOneMenu>
						</div>
						<div class="col-sm-4 form-group">
							<p:outputLabel for="cboProv" value="Provincia" />
							<h:selectOneMenu id="cboProv"
								value="#{directivoService.directivo.ubigeoProvincia}"
								disabled="${directivoService.deshabilitar}"
								styleClass="form-control">
								<f:selectItem itemLabel="Seleccionar" itemValue="00"
									noSelectionOption="true" />
								<p:ajax listener="#{directivoService.onProvinciaChange}"
									update="cboDis" />
								<f:selectItems value="#{directivoService.listaProvincias}"
									var="provincia" itemLabel="#{provincia.descripcion}"
									itemValue="#{provincia.codigo}" />
							</h:selectOneMenu>
						</div>
						<div class="col-sm-4 form-group">
							<p:outputLabel for="cboDis" value="Distrito" />
							<h:selectOneMenu id="cboDis"
								value="#{directivoService.directivo.ubigeoDistrito}"
								disabled="${directivoService.deshabilitar}"
								styleClass="form-control">
								<f:selectItem itemLabel="Seleccionar" itemValue="00"
									noSelectionOption="true" />
								<f:selectItems value="#{directivoService.listaDistritos}"
									var="distrito" itemLabel="#{distrito.descripcion}"
									itemValue="#{distrito.codigo}" />
							</h:selectOneMenu>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4 form-group">
							<p:outputLabel value="Teléfono Celular" for="txtTelCel" />
							<p:inputText id="txtTelCel" value="#{directivoService.directivo.celular}" required="true"
							disabled="${directivoService.deshabilitar}"
								requiredMessage="Teléfono Celular: Campo Obligatorio."
								validatorMessage="Teléfono Celular: Ingrese un número de celular válido."
								onkeyup="$(this).val($(this).val().replace(/[^0-9]/g, ''));"
								maxlength="9">
								<f:validateLength minimum="9" maximum="9"  />
							</p:inputText>
						</div>
					</div>
					</p:panel>
				</div>
			</div>
			<div class="page-subheader">
				<h3>Datos Laborales</h3>
			</div>
			<div class="gridContent">
				<div class="inner">
					<div class="row">
						<div class="col-sm-12 form-group">
							<p:outputLabel value="Entidad" for="cboEnt" />
							<h:selectOneMenu id="cboEnt" required="true"
								value="#{directivoService.directivo.entidadId}"
								styleClass="form-control"
								disabled="#{!directivoService.seleccionarEntidad or directivoService.deshabilitar}"
								requiredMessage="Entidad: Campo es Obligatorio.">
								<f:selectItem itemLabel="Seleccionar" itemValue=""
									noSelectionOption="true" />
								<f:selectItems value="#{directivoService.listaEntidades}"
									var="entidad" itemLabel="#{entidad.nombre}"
									itemValue="#{entidad.id}" />
								<p:ajax listener="#{directivoService.onEntidadChange}"
									update="cboOrg cboUOrg cboPuesEsp" />
							</h:selectOneMenu>
						</div>
						<div class="col-sm-12 form-group">
							<p:outputLabel value="Órgano" for="cboOrg" />
							<h:selectOneMenu id="cboOrg" required="true"
								value="#{directivoService.directivo.organo_id}"
								disabled="${directivoService.deshabilitar}"
								styleClass="form-control"
								requiredMessage="&Oacute;rgano: Campo es Obligatorio.">
								<f:selectItem itemLabel="Seleccionar" itemValue=""
									noSelectionOption="true" />
								<f:selectItems value="#{directivoService.listaOrganos}"
									var="organo" itemLabel="#{organo.nombre}"
									itemValue="#{organo.id}" />
								<p:ajax listener="#{directivoService.onOrganoChange}"
									update="cboUOrg cboPuesEsp" />
							</h:selectOneMenu>
						</div>
						<div class="col-sm-12 form-group">
							<p:outputLabel value="Unidad Orgánica" for="cboUOrg" />
							<h:selectOneMenu id="cboUOrg" required="true"
								value="#{directivoService.directivo.unidad_organica_id}"
								disabled="${directivoService.deshabilitar}"
								styleClass="form-control"
								requiredMessage="Unidad Orgánica: Campo es Obligatorio.">
								<f:selectItem itemLabel="Seleccionar" itemValue=""
									noSelectionOption="true" />
								<f:selectItems value="#{directivoService.listaUnidades}"
									var="unidad" itemLabel="#{unidad.nombre}"
									itemValue="#{unidad.id}" />
								<p:ajax listener="#{directivoService.onUnidadOrganicaChange}"
									update="cboPuesEsp" />
							</h:selectOneMenu>
						</div>
						<div class="col-sm-12 form-group">
							<p:outputLabel value="Puesto Específico" for="cboPuesEsp" />
							<h:selectOneMenu id="cboPuesEsp" required="true"
								value="#{directivoService.directivo.puesto_especifico_id}"
								disabled="${directivoService.deshabilitar}"
								styleClass="form-control"
								requiredMessage="Puesto Específico: Campo es Obligatorio.">
								<f:selectItem itemLabel="Seleccionar" itemValue=""
									noSelectionOption="true" />
								<f:selectItems value="#{directivoService.listaPuestos}"
									var="puesto" itemLabel="#{puesto.nombre}"
									itemValue="#{puesto.id}" />
							</h:selectOneMenu>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-6 form-group">
							<p:outputLabel value="Teléfono de Oficina " for="txtTelfOf" />
							<span style="color:red;">*</span> (solo aplica a Número de Teléfono) 
							<div class="row no-gutter">
								<p:inputText styleClass="col-sm-3" label="Código de Ciudad"
									value="#{directivoService.directivo.codigo_ciudad}"
									disabled="${directivoService.deshabilitar}"
									placeholder="Ciudad"
									requiredMessage="Código de Ciudad: Campo es Obligatorio."
									onkeyup="$(this).val($(this).val().replace(/[^0-9]/g, ''));"
									maxlength="2"
									validatorMessage="Código de Ciudad: Ingrese máximo 2 digitos."  >
								</p:inputText>
								<p:inputText id="txtTelfOf"
									label="Numero de Teléfono"
									value="#{directivoService.directivo.telefono_oficina}"
									disabled="${directivoService.deshabilitar}"
									styleClass="col-sm-6" placeholder="Número"
									onkeyup="$(this).val($(this).val().replace(/[^0-9]/g, ''));"
									requiredMessage="Número de Teléfono: Campo es Obligatorio." 
									maxlength="7"
									validatorMessage="Número de Teléfono: Ingrese como mínimo 6 números y máximo 8 números." >
									<f:validateLength minimum="6" maximum="7"  />
								</p:inputText>
								<p:inputText styleClass="col-sm-3" label="Anexo"
									value="#{directivoService.directivo.anexo}" placeholder="Anexo"
									disabled="${directivoService.deshabilitar}"
									onkeyup="$(this).val($(this).val().replace(/[^0-9]/g, ''));"
									requiredMessage="Anexo: Campo es Obligatorio."
									maxlength="4"
									validatorMessage="Anexo: Ingrese como mínimo 2 números y máximo 4 digitos." >
								</p:inputText>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4 form-group">
							<p:outputLabel for="txtCorInst" value="Correo Institucional" />
							<p:inputText id="txtCorInst" value="#{directivoService.directivo.email_institucional}"
							disabled="${directivoService.deshabilitar}"
							requiredMessage="Correo Institucional: Campo Obligatorio." 
								validatorMessage="Correo Institucional: Campo no tiene un formato válido." 
								autocomplete="off" maxlength="250" 
								styleClass="text-transform-none">
								<p:ajax event="keyup" listener="#{directivoService.verificaEmail(directivoService.directivo.email_institucional)}" update="messages" />
							</p:inputText>
						</div>
						<div class="col-sm-4 form-group">
							<p:outputLabel for="txtCorPer" value="Correo Personal" />
							<p:inputText id="txtCorPer" value="#{directivoService.directivo.emailPersonal}"	required="true" 
							disabled="${directivoService.deshabilitar}"
								requiredMessage="Correo Personal: Campo Obligatorio." 
								validatorMessage="Correo Personal: Campo no tiene un formato válido." 
								autocomplete="off" maxlength="250" 
								styleClass="text-transform-none">
								<p:ajax event="keyup" listener="#{directivoService.verificaEmail(directivoService.directivo.emailPersonal)}" update="messages" />
							</p:inputText>
						</div>
						<div class="col-sm-4 form-group">
							<div class="row">
								<div class="col-sm-6">
									<p:outputLabel for="cboServConf" value="¿De confianza?" />
									<h:selectOneMenu
										value="#{directivoService.directivo.servidorConfianza}"
										disabled="${directivoService.deshabilitar}"
										required="true" styleClass="form-control" id="cboServConf"
										requiredMessage="¿De confianza?: Campo es Obligatorio.">
										<f:selectItem itemLabel="Seleccionar" itemValue=""
											noSelectionOption="true" />
										<f:selectItem itemLabel="SI" itemValue="S" />
										<f:selectItem itemLabel="NO" itemValue="N" />
									</h:selectOneMenu>
								</div>
								<div class="col-sm-6">
									<p:outputLabel for="cboEnc" value="¿Encargado?" />
									<h:selectOneMenu
										value="#{directivoService.directivo.encargado}"
										disabled="${directivoService.deshabilitar}"
										required="true" styleClass="form-control" id="cboEnc"
										requiredMessage="¿Encargado?: Campo es Obligatorio.">
										<f:selectItem itemLabel="Seleccionar" itemValue=""
											noSelectionOption="true" />
										<f:selectItem itemLabel="SI" itemValue="S" />
										<f:selectItem itemLabel="NO" itemValue="N" />
									</h:selectOneMenu>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4 form-group">
							<p:outputLabel value="Fecha Fin del Censo" for="fechaFinCenso" rendered="${directivoService.editar}"/>
							<p:calendar id="fechaFinCenso" value="#{directivoService.directivo.fechaFinCenso}"
							rendered="${directivoService.editar}" 
							pattern="dd/MM/yyyy"  disabled="true" />
						</div>
						<div class="col-sm-4 form-group">
							<p:outputLabel value="Fecha Fin Ampliación del Censo" for="fechaFinAmpliacion" rendered="${directivoService.editar}"/>
							<p:calendar id="fechaFinAmpliacion" value="#{directivoService.directivo.fechaFinCensoExt}"
							rendered="${directivoService.editar}"	
							pattern="dd/MM/yyyy"  disabled="true" />
						</div>
					</div>
					<div class="btnAction row no-gutter">
						<div class="text-right">
							<c:if test="#{(directivoService.directivo.idEstadoDirectivo == 1 or directivoService.directivo.idEstadoDirectivo == 2) and directivoService.editar}">
								<p:commandButton id="habilitaDirectivo" styleClass="btn btn-success" 
								update="messages form" value="Habilitar Directivo" icon="fa fa-envelope-o" iconPos="right" 
								disabled="${directivoService.deshabilitar}"
								actionListener="#{directivoService.informarDirectivo}" oncomplete="setTimeout('mensajeFadeOut()', 5000);">
									<p:confirm header="Confirmación" message="¿Está seguro de habilitar el Directivo?" icon="ui-icon-alert" />
								</p:commandButton>
								&nbsp;&nbsp;
							</c:if>
							<p:commandLink immediate="true" styleClass="btn btn-view" style="padding: 10px;"
								value="Cancelar" action="directivos_listado.jsf">
							<p:confirm header="Confirmación" message="¿Está seguro de cancelar el registro de Directivos Públicos?" icon="ui-icon-alert" />
							</p:commandLink>
							&nbsp;&nbsp;
							<p:commandButton value="Guardar" id="guardar"
								update="messages form" oncomplete="setTimeout('mensajeFadeOut()', 5000);"
								actionListener="#{directivoService.grabarDirectivo}"
								styleClass="btn btn-success ui-priority-primary" 
								disabled="${directivoService.deshabilitar}"
								icon="ui-menuitem-icon ui-icon fa fa-save" iconPos="right" >
							<p:confirm header="Confirmación" message="¿Está seguro de guardar el registro de Directivo Público?" icon="ui-icon-alert" />
							</p:commandButton>
						</div>
					</div>
				</div>
			</div>
			<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" closeOnEscape="true" rendered="true">
			<p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
			<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
		</p:confirmDialog>
		</h:form>
	</ui:define>
	<ui:define name="script">
	</ui:define>
</ui:composition>